<script setup>
//import {useMembersStore} from '@/store/members'
//import {useMemberCardStore} from '@/store/memberCard'
import {useReservationRecordStore} from '@/store/reservationRecord'
import {useConsumptionRecordStore} from '@/store/consumptionRecord'
import {storeToRefs} from 'pinia'
import { onMounted } from 'vue'
import {ref} from 'vue'
import * as echarts from 'echarts'
import memberApi from '@/api/member'
import homeApi from '@/api/home'

//const membersStore = useMembersStore()
//const {members} = storeToRefs(membersStore)
//const memberCardStore = useMemberCardStore()
const reservationRecordStore = useReservationRecordStore()
const {reservationRecords} = storeToRefs(reservationRecordStore)
const consumptionRecordStore = useConsumptionRecordStore()

const newLoseGraph = ref(null)
const chargeGraph = ref(null)
const memberCardGraph = ref(null)

const memberCount = ref(0)
const activeMemberCount = ref(0)

const drawNewLoseGraph = async ()=>{
    const myChart = echarts.init(newLoseGraph.value)
    let res = await homeApi.getMonthNewMemberCount()
    const newMembers = res.data.data
    res = await homeApi.getMonthLoseMemberCount()
    const loseMembers = res.data.data
    const days = []
    for (let i = 1; i <= new Date().getDate(); i++){
        days.push(i)
    }
    myChart.setOption({
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                name: '日',
                type: 'category',
                data: days
            }
        ],
        yAxis: [
            {
                name: '人次',
                type: 'value'
            }
        ],
        series: [
            {
                name: '流失',
                type: 'bar',
                stack: 'p',
                color: 'gray',
                emphasis: {
                    focus: 'series'
                },
                data: loseMembers
            },
            {
                name: '新增',
                type: 'bar',
                stack: 'p',
                color: 'green',
                emphasis: {
                    focus: 'series'
                },
                data: newMembers
            },
        ]
    })
}

const drawChargeGraph = async () => {
    const myChart = echarts.init(chargeGraph.value)
    const res = await homeApi.getMonthMoney()
    const data = res.data.data
    const days = []
    for (let i = 1; i <= new Date().getDate(); i++){
        days.push(i)
    }
    myChart.setOption({
        title:{
            text: '当月每日收费统计',
        },
        legend: {},
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            name: '日',
            data: days
        },
        yAxis: {
            type: 'value',
            name: '收费金额'
        },
        toolbox: {
            show: true,
            feature: {
                saveAsImage: { show: true }
            }
        },
        series: [
            {
                name: '收费',
                data: data,
                type: 'line',
                areaStyle: {}
            }
        ]
    })
}

const drawMemberCardGraph = async ()=>{
    const myChart = echarts.init(memberCardGraph.value)
    const res = await homeApi.getMemberCardNum()
    const data = res.data.data
    myChart.setOption({
        title:{
            text: '会员卡统计',
            subtext: '绑定会员卡数量',
            left: 'center',
        },
        tooltip: {
            trigger: 'item',
        },
        legend: {
            top: 'bottom'
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        series: [
            {
                name: 'Nightingale Chart',
                type: 'pie',
                radius: [50, 150],
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 8
                },
                data: data
            }
        ]
    })
}

const refresh = ()=>{
    location.reload()
}

const fetchData = async ()=>{
    let res = await homeApi.getMemberCount()
    memberCount.value = res.data.data
    res = await homeApi.getActiveMemberCount()
    activeMemberCount.value = res.data.data
}

onMounted(async ()=>{
    await fetchData()
    await drawNewLoseGraph()
    await drawChargeGraph()
    await drawMemberCardGraph()
})
</script>

<template>
    <div style="display:flex">
        <div class="numCard">
            <h3>{{memberCount}}</h3>
            <p>会员总数</p>
        </div>
        <div class="numCard">
            <h3>{{activeMemberCount}}</h3>
            <p>活跃用户</p>
        </div>
        <div class="numCard">
            <h3>{{reservationRecords.length}}</h3>
            <p>预约总数</p>
        </div>
        <el-button type="success" @click="refresh">刷新数据</el-button>
    </div>
    <el-divider/>
    <div ref="newLoseGraph" style="width:1000px; height:400px;"></div>
    <el-divider/>
    <div ref="chargeGraph" style="width:1000px; height:400px;"></div>
    <el-divider/>
    <div ref="memberCardGraph" style="width:1000px; height:500px;"></div>
</template>

<style scoped>
.numCard {
    border:1px solid red; 
    height: 70px; 
    width: 280px; 
    margin-right: 20px;
}

.numCard h3 {
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 5px;
}

.numCard p{
    margin-left: 10px;
    margin-top: 0;
}
</style>
